<template>
	<div class="archives_devicemonitor_info">
		<div>
			<Table
				:tableData="tableData"
				:tableHead="tableHead"
				:isUseSlot="false"
				:page="listQuery.page"
				:limit="listQuery.limit"
				v-loading="listLoading"
			>
				<template slot="tool" slot-scope="{ data }">
					<el-button
						style="padding:3px;"
						icon="el-icon-document"
						@click="handleEdit(data.row)"
						type="text"
						>查看</el-button
					>
				</template>
			</Table>
			<Pagination
				v-show="total > 0"
				:total="total"
				:page.sync="listQuery.page"
				:limit.sync="listQuery.limit"
				@pagination="getList"
			></Pagination>
		</div>
		<form-tem
			:info="{ title: '设备监控因子信息', width: '70%', top: '5%' }"
			:formList="formList"
			@submit="submit"
			@close="closeDialog"
			:isDisabled="true"
			ref="formDelg"
			:dialogFormVisible.sync="dialogFormVisible"
		>
		</form-tem>
	</div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import formTem from "@/template/form.temp";
import Table from "@/components/Table";
import {
	getDeviceMonitorList,
	getDeviceMonitorInfo,
	insertDeviceMonitor,
	updateDeviceMonitor
} from "@/api/RCIM/RCIM-archives";
import control from "../mixins/control";
import { getMonitorObject, getDeviceFactor } from "@/api/RCIM/RCIM-select";
import { cloneDeep } from "lodash";
import { validateFormNumber } from "@/utils/validateForm";
import { deleteDeviceMonitor } from "@/api/RCIM/RCIM-delet";
export default {
	components: {
		Table,
		Pagination,
		formTem
	},
	mixins: [control],
	name: "archives_devicemonitor_info",
	data() {
		return {
			tableData: [],
			tableHead: [
				{
					prop: "useSourceDevice",
					label: "用源设备",
					align: "left"
				},
				{
					prop: "monitorFactor",
					label: "监控因子",
					align: "left"
				},
				{
					prop: "unitCoefficient",
					label: "单位系数",
					align: "left"
				},
				{
					prop: "operate",
					label: "操作",
					align: "center"
				}
			],
			total: 1,
			listQuery: {
				page: 1,
				limit: 10,
				id: ""
			},
			listLoading: false,
			dialogFormVisible: false,
			formList: [
				{
					list: [
						{
							type: "select",
							label: "监控设备",
							width: "33%",
							labelWidth: "140px",
							placeholder: "请选择",
							moduleKey: "deviceFactor",
							children: "option",
							options: [],
							query: {
								enterpriseId: this.entData.id
							},
							fetch: getDeviceFactor,
							validate: function() {
								return [
									{
										required: false,
										message: "请选择监控设备",
										trigger: "change"
									}
								];
							}
						},
						{
							type: "select",
							label: "监控因子",
							width: "33%",
							labelWidth: "140px",
							placeholder: "",
							moduleKey: "monitorFactor",
							children: "option",
							options: [],
							fetch: getMonitorObject,
							validate: function() {
								return [
									{
										required: false,
										message: "请选择监控因子",
										trigger: "change"
									}
								];
							}
						},
						// {
						// 	type: "input",
						// 	label: "别名",
						// 	width: "33%",
						// 	labelWidth: "140px",
						// 	placeholder: "",
						// 	moduleKey: "alias"
						// },

						{
							type: "input",
							label: "单位系数",
							width: "33%",
							labelWidth: "140px",
							placeholder: "",
							maxlength: "10",
							showWordLimit: true,
							moduleKey: "unitCoefficient",
							validate: function() {
								return [
									{
										validator: validateFormNumber,
										trigger: "blur"
									}
								];
							}
						}
					]
				}
			],
			search: ""
		};
	},
	mounted() {
		this.listQuery.id = this.entData.id;
		this.getList();
	},
	methods: {
		/**
		 * @desc 删除数据
		 * @param {Object} row 表格行数据
		 */
		delet(row) {
			this.$confirm("确认要删除吗？")
				.then(_ => {
					deleteDeviceMonitor(row.id).then(res => {
						if (res.code === 200) {
							this.getList();
							return this.$message({
								type: "success",
								message: "删除成功"
							});
						}
						return this.$message({
							type: "error",
							message: "删除失败"
						});
					});
				})
				.catch(_ => {});
		},
		/**
		 * @desc 获取表格数据
		 */
		async getList() {
			this.listLoading = true;
			const { data } = await getDeviceMonitorList(this.listQuery);
			this.total = data.total;
			this.tableData = data.deviceMonitorList;
			this.listLoading = false;
		},
		/**
		 * @desc 编辑表格数据
		 * @param {Object} row 表格行数据
		 */
		async handleEdit(row) {
			this.$refs.formDelg.openDialog();
			this.id = row.id;
			const { data } = await getDeviceMonitorInfo({ id: row.id });
			// this.editInfo = data.data;
			this.$nextTick(() => {
				const parent = this.$refs.formDelg
					.getFormEle()
					.forEach(item => {
						item[0].setDefaultValue(data.data);
					});
			});
		},
		/**
		 * @desc 关闭弹窗回调
		 */
		closeDialog() {
			this.id = ""
		},
		handleInfo(infoObject) {
			// 处理获取实例信息，与formList的数据的匹配
			if (!infoObject || typeof infoObject != "object") return;
			for (let key in infoObject) {
				this.formList.forEach(item => {
					if (key === item.moduleKey) {
						item[key] = infoObject[key];
					}
				});
			}
		},
		initShowDetail(val) {},
		/**
		 * @desc 处理数据
		 * @param {Object} formData 表单数据
		 */
		formateForm(formData) {
			const result = cloneDeep(formData);
			result.enterpriseId = this.entData.id;
			return result;
		},

		/**
		 * @desc 新增、编辑数据
		 * @param {Object} val 表单数据
		 */
		submit(val) {
			const params = this.formateForm(val);
			if (this.id) {
				updateDeviceMonitor({ id: this.id, ...val }).then(res => {
					this.fresh();
					if (res.code === 200) {
						this.dialogFormVisible = false;
						return this.$message({
							type: "success",
							message: "修改成功"
						});
					}
					return this.$message({
						type: "success",
						message: "修改失败"
					});
				});
			} else {
				// insertDeviceMonitor(val)
				insertDeviceMonitor(params).then(res => {
					this.fresh();
					if (res.code === 200) {
						this.dialogFormVisible = false;
						return this.$message({
							type: "success",
							message: "添加成功"
						});
					}
					return this.$message({
						type: "success",
						message: "添加失败"
					});
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.archives_devicemonitor_info {
}
</style>
